<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>		
<meta charset="UTF-8">
<title>班级成绩管理</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function cx() {
		var bjId=$('#bj').val();
		var kcId=$('#kc').val();
		if(kcId==0||bjId==0){
			$('#table').empty();
		}else{
			$('#table').load('grade',{method:'getClassGrade',bjId:bjId,kcId:kcId});
		}
	}
	function cjChange(id,value) {
		$.post('grade',{method:'cjChange',id:id,grade:value},function(data){});
	}
	function selectChange() {
		$('table').empty();
	}
	function fandeng() {
		window.location="login.jsp"
	}	
	function fanzhu() {
		window.location="main?method=main"
	}	
</script>
<style type="text/css">
	.button1 {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 13px 28px;
 text-align: center;
 background-color: white;
 color: black;
background: #ee0979; 
background: linear-gradient(to right, #ee0979, #ff6a00);
 border-radius:4px;
 }
 .button1:hover {
 background-color: #4CAF50;
 color: white;
 }
</style>
<style type="text/css">
.btn{width: 115px;height: 45px;line-height: 15px;text-align: center;color: #fff;font-size: 15px;text-transform: uppercase;text-decoration: none;font-family: sans-serif;box-sizing: border-box;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 60px;z-index: 1}.btn:hover{animation: animate 8s linear infinite}@keyframes animate{0%{background-position: 0%}100%{background-position: 400%}} 
    .btn::before{content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 40px;opacity: 0;transition: 0.5s}.btn:hover::before{filter: blur(20px);opacity: 1;animation: animate 8s linear infinite}    
 </style>
<style type="text/css">
	tble,th{
		border: 1px solid;
	}
	table{
		border-collapse: collapse;
		margin: auto;
	}
	td{
		width: 150px;
		height: 80px;
		text-align: center;
	}
	body {	
	 height: 700px;
 	 background-image: linear-gradient(45deg, #00FFFF , #FFC0CB 60%); 
	}

</style>
</head>
<body>
	<p>
		<label>班级：</label>
		<select id="bj" onchange="selectChange()">
			<option value="0">--请选择--</option>
			<c:forEach items="${bjs}" var="bj">
				<option value="${bj.id}">${bj.name}</option>
			</c:forEach>
		</select>
		<label>课程：</label>
		<select id="kc" onchange="selectChange()">
			<option value="0">--请选择--</option>
			<c:forEach items="${kcs}" var="kc">
				<option value="${kc.id }"> ${kc.name}</option>		
			</c:forEach>
		</select>
		<button onclick="cx()" class="button1">查询</button>
	</p>
	<div id="table">
	<button onclick="fandeng()" class="btn">返回登录页面</button>
	<button onclick="fanzhu()" class="btn">返回主页面</button>
	</div>
</body>
</html>